/* eslint-disable @typescript-eslint/no-explicit-any */
import {
	Button,
	CheckCell,
	ComboCell,
	ComboValue,
	DateCell,
	InputGrid,
	InputGridColumn,
	knnoTable,
	NumberCell,
	SelectCell,
	TagCell,
	TextCell,
	TextInline,
} from '../imports';
import { bar } from '../style.css';

export function GridInputPage() {
	let cell: TextCell;
	let numCell: NumberCell;
	let checkChell: CheckCell;
	let grid: InputGrid<any>;
	return (
		<div>
			<h1>InputGridPage</h1>
			<table class={knnoTable}>
				<tr>
					<th>单元格1</th>
					<th>单元格2</th>
				</tr>
				<tr>
					<TextCell
						icon="city"
						maxLength={10}
						onChange={function () {
							console.log(this.value);
						}}
						ref={function (ref) {
							cell = ref;
						}}
					/>
					<TextCell
						icon="account"
						multiline
						onChange={function () {
							console.log(this.value);
						}}
						textAlign="left"
					/>
				</tr>
				<tr>
					<NumberCell
						icon="phone"
						maxPrecision={2}
						minPrecision={2}
						prefix="$"
						thousandsComma
						value={123234.234}
						onChange={function () {
							console.log(this.value);
						}}
						ref={function (ref) {
							numCell = ref;
						}}
					/>
					<NumberCell
						icon="edit"
						suffix="元"
						onChange={function () {
							console.log(this.value);
						}}
					/>
				</tr>
				<tr>
					<CheckCell
						icon="home"
						options={['选项1', '选项2', '选项3']}
						value={['选项1', '选项3']}
						maxCount={2}
						ref={(c) => (checkChell = c)}
						onChange={() => {
							console.log(checkChell.value);
						}}
					/>
					<CheckCell
						icon="address"
						readOnly
						options={[
							{ value: true, text: '是' },
							{ value: false, text: '否' },
						]}
						value={[true]}
						radio
						ref={(c) => {
							c.onChange(() => {
								console.log(c.value);
							});
						}}
					/>
				</tr>
				<tr>
					<SelectCell
						multiple
						multiSelectType="cascade-leaf"
						icon="organ"
						options={[
							{ value: 1, text: '选项1' },
							{ value: 2, text: '选项2' },
							{
								text: '选项2',
								children: [
									{
										value: 21,
										text: '选项2-1',
									},
									{
										value: 22,
										text: '选项2-2',
									},
								],
							},
						]}
						value={[
							{
								value: 21,
								text: '选项2-1',
							},
						]}
					/>
					<SelectCell
						icon="mail"
						options={[
							{ value: 1, text: '选项1' },
							{ value: 2, text: '选项2' },
						]}
					/>
				</tr>
				<tr>
					<DateCell icon="address" value="2024-01-01 23:45" mode="dd+tm" format="yyyy 年 MM 月 dd 日 hh : mm" />
					<DateCell mode="dm" />
				</tr>
				<tr>
					<TagCell icon="city" />
					<TagCell
						value={['这是一个选项']}
						options={[
							{ value: 1, text: '选项1' },
							{ value: 2, text: '选项2' },
						]}
						onChange={function () {
							console.log(this.value);
						}}
					/>
				</tr>
				<tr>
					<ComboCell readOnly />
					<ComboCell
						icon="account"
						queryHandler={async (): Promise<ComboValue[]> => {
							return [
								{ value: 1, text: '选项1', desc: '这是一个描述信息' },
								{ value: 2, text: '选项2' },
							]; //.filter((item) => item.text.includes(keyword));
						}}
					/>
				</tr>
			</table>
			<div class={bar}>
				<Button
					onClick={function () {
						cell.setValue('1234567890abcdefghijklmnopqrstuvwxyz');
					}}
					textContent="文本框赋值"
				/>
				<Button
					onClick={function () {
						numCell.setValue(1234567890.123456);
					}}
					textContent="数字框赋值"
				/>
				<Button
					onClick={function () {
						checkChell.setReadOnly(!checkChell.readOnly);
					}}
					textContent="切换只读"
				/>
			</div>
			<InputGrid
				serialNo
				reorderable
				data={[
					{
						name: '张三',
						age: 20,
						gender: ['male'],
						city: [{ value: 'beijing', text: '北京' }],
						tags: ['tag1', 'tag2'],
						combo: '123',
						birthday: '2000-01-01',
					},
					{
						name: '李四',
						age: 33,
						gender: ['female'],
						city: [{ value: 'shanghai', text: '上海' }],
						tags: ['tag2', 'tag3'],
						combo: '456',
						birthday: '2001-01-01',
					},
					{
						name: '王五',
						age: 33,
						gender: ['female'],
						city: [{ value: 'shenzhen', text: '深圳' }],
						tags: ['tag2', 'tag3'],
						combo: '456',
						birthday: '2001-01-01',
					},
					{
						name: '赵六',
						age: 33,
						gender: ['female'],
						city: [{ value: 'tianjin', text: '天津' }],
						tags: [],
						combo: '456',
						birthday: '2001-01-01',
					},
				]}
				columns={
					[
						{
							type: 'text',
							field: 'name',
							title: '姓名',
							multiline: true,
							width: '10%',
							validation() {
								if (this.value === undefined) {
									return '姓名不能为空';
								}
								if (this.value.length < 2) {
									return '姓名长度不能小于2';
								} else {
									return '';
								}
							},
						},
						{
							type: 'number',
							field: 'age',
							title: '年龄',
							max: 150,
							validation() {
								if (this.value === undefined) {
									return '年龄不能为空';
								} else {
									return '';
								}
							},
						},
						{
							type: 'check',
							field: 'gender',
							title: '性别',
							radio: true,
							options: [
								{ value: 'male', text: '男' },
								{ value: 'female', text: '女' },
							],
						},
						{
							type: 'select',
							field: 'city',
							title: '城市',
							options: [
								{ value: 'beijing', text: '北京' },
								{ value: 'shanghai', text: '上海' },
								{ value: 'guangzhou', text: '广州' },
								{ value: 'shenzhen', text: '深圳' },
								{ value: 'tianjin', text: '天津' },
							],
						},
						{
							type: 'tag',
							field: 'tags',
							title: '标签',
							width: '25%',
							options: [
								{ value: 'tag1', text: '标签1' },
								{ value: 'tag2', text: '标签2' },
								{ value: 'tag3', text: '标签3' },
							],
						},
						{
							type: 'combo',
							field: 'combo',
							title: '组合框',
							queryHandler: async (): Promise<ComboValue[]> => {
								return [
									{ value: 1, text: '选项1' },
									{ value: 2, text: '选项2' },
								];
							},
						},
						{
							type: 'date',
							field: 'birthday',
							title: '生日',
							mode: 'dd',
							width: '9em',
						},
					] as const satisfies readonly InputGridColumn[]
				}
				summary={[
					{
						text: '合计人数',
						colSpan: 8,
					},
					{
						text: function () {
							return this.data.length + '人';
						},
					},
				]}
				onChange={function () {
					console.log(this.data);
				}}
				ref={(t) => (grid = t)}
			/>
			<div>
				<Button onClick={() => grid.validate()}>校验表格</Button>
			</div>
			<h1>Inline editor</h1>
			请输入你的姓名：
			<TextInline />
		</div>
	);
}

// document.addEventListener('focusin', (evt) => {
// 	console.log(document.activeElement);
// })
